import React, { Component } from "react";
import axios from 'axios'
import { Tabs, Divider, Carousel, Tooltip } from "antd";
import Item from "antd/lib/list/Item";
const { TabPane } = Tabs;

export class TabList extends Component {
  constructor(props){
    super(props)
    this.state = {
      ListData: []
    }
  }
  componentDidMount(){
    axios('http://127.0.0.1:7001/default/getMiQuanList').then(
      (res)=>{
        this.setState({
          ListData: res.data.data
        })
      }
    )
  }
  render() {
    function callback(key) {
      console.log(key, "key");
    }
    const { ListData } = this.state
    return (
      <div className="tabListBox">
        <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="密圈推荐" key="1">
            <Carousel autoplay>
              {
                ListData.map((res,index) => {
                  return (
                    <div key={index} className="miquanCarouseList">
                      <img src={ res.miQuanImgurl } alt="技术胖  专注于WEB和移动前端开发" style={{ width:'100%',height:'220px' }} />
                      <Divider style={{color:'red',borderColor:'#000'}}>{ res.miQuanTitle }</Divider>
                      <h4>博主：{ res.miQuanAuthor }</h4>
                      <h4>平台：
                        <Tooltip placement="top" title={`跳转地址：${res.miQuanJumpurl?res.miQuanJumpurl:'暂无'}`}>
                          <a href={ res.miQuanJumpurl } className="blue_link" target="_blank">{ res.platform }</a>
                        </Tooltip>
                      </h4>
                        <h4>类型：{ res.miQuanType }</h4>
                    </div>
                  )
                })
              }
            </Carousel>
          </TabPane>
          <TabPane tab="Tab 2" key="2">
            Content of Tab Pane 2
          </TabPane>
          <TabPane tab="Tab 3" key="3">
            Content of Tab Pane 3
          </TabPane>
        </Tabs>
      </div>
    );
  }
}

export default TabList
